<template>
  <div class="slaughter-info">
    <!-- 屠宰信息 -->
    <div class="info-section">
      <h3>屠宰信息</h3>
      <div class="info-header">
        <span>屠宰信息</span>
        <el-button size="small" type="primary" @click="openSettings('slaughter')">设置</el-button>
        <span class="info-number">1</span>
      </div>
      <div class="info-content">
        <div class="info-row">
          <span>批次：{{ batch }}</span>
          <span>到厂均量：{{ arrivalWeight }} 公斤</span>
        </div>
        <div class="info-row">
          <span>到厂时间：{{ arrivalTime }}</span>
          <span>屠宰时间：{{ slaughterTime }}</span>
        </div>
      </div>
    </div>

    <!-- 相关资质 -->
    <div class="info-section">
      <h3>相关资质</h3>
      <div class="certificate-container">
        <div v-for="(certificate, index) in certificates" :key="index" class="certificate-item">
          <img :src="certificate.url" alt="资质证书" class="certificate-img">
          <div class="certificate-name">{{ certificate.name }}</div>
          <el-button size="mini" type="danger" @click="removeCertificate(index)">X</el-button>
        </div>
        <el-upload
          :action="uploadAction"
          :show-file-list="false"
          :before-upload="beforeUpload"
          class="upload-certificate"
        >
          <div class="upload-icon">+</div>
          <div class="upload-text">上传资质</div>
        </el-upload>
      </div>
    </div>

    <!-- 企业信息 -->
    <div class="info-section">
      <h3>企业信息</h3>
      <div class="info-header">
        <span>企业信息</span>
        <el-button size="small" type="primary" @click="openSettings('enterprise')">设置</el-button>
        <span class="info-number">3</span>
      </div>
      <div class="info-content">
        <div class="info-row">
          <span>公司名称：{{ companyName }}</span>
          <span>成立时间：{{ establishmentTime }}</span>
        </div>
        <div class="info-row">
          <span>公司地址：{{ companyAddress }}</span>
        </div>
        <div class="info-row">
          <span>公司简介：{{ companyIntroduction }}</span>
        </div>
      </div>
    </div>

    <!-- 企业照片 -->
    <div class="info-section">
      <h3>企业照片</h3>
      <div class="photo-container">
        <div v-for="(photo, index) in photos" :key="index" class="photo-item">
          <img :src="photo.url" alt="企业照片" class="photo-img">
          <el-button size="mini" type="danger" @click="removePhoto(index)">X</el-button>
        </div>
        <el-upload
          :action="uploadAction"
          :show-file-list="false"
          :before-upload="beforeUpload"
          class="upload-photo"
        >
          <div class="upload-icon">+</div>
          <div class="upload-text">上传照片</div>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

// 屠宰信息数据
const batch = ref('20210718');
const arrivalWeight = ref('20');
const arrivalTime = ref('2021 年 10 月 18 日 18:32:21');
const slaughterTime = ref('2021 年 10 月 19 日 10:30:20');

// 相关资质数据
const certificates = ref([
  { url: 'https://example.com/certificate1.jpg', name: '宰前检疫' },
  { url: 'https://example.com/certificate2.jpg', name: '宰后检疫' }
]);

// 企业信息数据
const companyName = ref('四川锦祥食品有限公司');
const establishmentTime = ref('2016 年 7 月 18 日');
const companyAddress = ref('四川省巴中市通江县 XXX');
const companyIntroduction = ref('企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介企业简介');

// 企业照片数据
const photos = ref([
  { url: 'https://example.com/photo1.jpg' },
  { url: 'https://example.com/photo2.jpg' }
]);

const uploadAction = '#'; // 实际上传地址
const isUploading = ref(false);

const beforeUpload = (file: any) => {
  ElMessage.info('上传功能暂未实现');
  return false;
};

const removeCertificate = (index: number) => {
  certificates.value.splice(index, 1);
};

const removePhoto = (index: number) => {
  photos.value.splice(index, 1);
};

const openSettings = (type: string) => {
  ElMessage.info(`暂未实现 ${type} 设置功能`);
};
</script>

<style scoped>
.slaughter-info {
  padding: 20px;
  height: 500px;
  overflow-y: auto;
  font-family: Arial, sans-serif;
}

.info-section {
  margin-bottom: 20px;
}

.info-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.info-number {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #0088ff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}

.info-content {
  display: flex;
  flex-direction: column;
}

.info-row {
  display: flex;
  margin-bottom: 5px;
}

.certificate-container {
  display: flex;
  flex-wrap: wrap;
}

.certificate-item {
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
}

.certificate-img {
  width: 150px;
  height: 100px;
  object-fit: cover;
}

.upload-certificate {
  width: 150px;
  height: 100px;
  border: 1px dashed #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.upload-icon {
  font-size: 30px;
  color: #0088ff;
}

.upload-text {
  color: #0088ff;
}

.photo-container {
  display: flex;
  flex-wrap: wrap;
}

.photo-item {
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
}

.photo-img {
  width: 150px;
  height: 100px;
  object-fit: cover;
}

.upload-photo {
  width: 150px;
  height: 100px;
  border: 1px dashed #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
</style>